<template>
    <div>
      <table border="1">
        <tr>
          <th>用户名</th>
          <th>密码</th>
          <th>图片</th>
          <th>操作</th>
        </tr>
        <tr v-for="a in all">
          <td>{{a.username}}</td>
          <td>{{a.password}}</td>
          <td><img :src="a.img" width="50px"></td>
          <td>
            <button @click="xiu(a.id)">修改</button>
          </td>
        </tr>
      </table>
      <button v-for="num in list" :value="num" @click="fen(num)">{{num}}</button>
      <br>
      <input type="text" v-model="username"><button @click="jian">搜索</button>

    </div>
</template>

<script>
    export default {
        name: "allusers",
      data(){
          return{
            all:[],
            list:[],
            num:'',
            //检索关键字
            username:''



          }
      },

      mounted() {

          this.axios({
            url:'http://127.0.0.1:8000/alluserss/',
            method:'post',
          }).then(res=>{

           this.list = res.data.list;
            this.all = res.data.data;

          })


      },
      methods:{

          //修改
        xiu(id){

          this.$router.push({'name':'update',params:{'id':id}})
        },
          //检索
        jian(){

            this.$router.push({'name':'js',query:{'username':this.username}})

        },

        //分页
        fen(num){
            this.axios({
              url:'http://127.0.0.1:8000/alluserss/',
              method: 'post',
              data:{
                uid:this.uid,
                p:num
              }
            }).then(res=>{
              this.list = res.data.list;
              this.all = res.data.data;
            })
        }



      },
    }
</script>

<style scoped>

</style>
